<html>
    <head>
        <title>Itowns - Panorama example</title>

        <style type="text/css">
            html {
                height: 100%;
            }

            body {
                margin: 0;
                overflow: hidden;
                height: 100%;
            }

            #viewerDiv {
                margin : auto auto;
                width: 100%;
                height: 100%;
                padding: 0;
            }
            @media (max-width: 600px) {
                .dg {
                    display: none;
                }
            }
        </style>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="viewerDiv"></div>

        <script src="../dist/itowns.js"></script>

        <script src="../dist/debug.js"></script>
        <script src="GUI/dat.gui/dat.gui.min.js"></script>
        <script type="text/javascript">
            var viewerDiv;
            var view;

            viewerDiv = document.getElementById('viewerDiv');

            // Declare 5 panoramas
            var urls = [
                'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/panoramas/arles/metadata1.json',
                'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/panoramas/arles/metadata2.json',
                'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/panoramas/arles/metadata3.json',
                'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/panoramas/arles/metadata4.json',
                'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/panoramas/arles/metadata5.json'];
            var promises = urls.map(function(url) { return itowns.Fetcher.json(url, { crossOrigin: 'anonymous' }); });

            var activeIndex = 3;
            Promise.all(promises).then(function _(panoramas) {
                // Create an iTowns PanoramaView
                view = new itowns.PanoramaView(viewerDiv,
                    new itowns.Coordinates('EPSG:4326',
                        panoramas[0]['coordinates'][0],
                        panoramas[0]['coordinates'][1]).as('EPSG:4978'),
                    panoramas[0]['ratio']);

                var index = 0;
                var layers = [];

                // Add one color layer per panorama
                for (var i = 0; i < panoramas.length; i++) {
                    var pano = panoramas[i];
                    var url = new URL(pano['images'], urls[index]);
                    var _id = url.pathname;
                    view.addLayer({
                        visible: index == activeIndex,
                        url: url.href,
                        networkOptions: { crossOrigin: 'anonymous' },
                        type: 'color',
                        protocol: 'static',
                        id: _id,
                        projection: 'EPSG:4326',
                    });

                    layers.push(view.getLayers(function (l) { return (l.id == _id); })[0]);
                    index ++;
                }
                view.camera.camera3D.far = 10000;
                view.notifyChange(true);

                // Setup debug menu
                var gui = new dat.GUI();
                var ddd = new debug.Debug(view, gui);
                debug.createTileDebugUI(gui, view, view.baseLayer, ddd);
                gui.add(view.baseLayer, 'quality').min(0.1).max(1.0).onChange(
                    function () { view.notifyChange(true); });

                // Add controls
                new itowns.FirstPersonControls(view, {
                    focusOnClick: true,
                    panoramaRatio: panoramas[0]['ratio'],
                    moveSpeed: 0,
                });

                // Change displayed panorama on mouse right-click
                document.addEventListener('contextmenu', function (evt) {
                    evt.preventDefault();
                    layers[activeIndex].visible = false;
                    activeIndex = (activeIndex + 1) % 5;
                    layers[activeIndex].visible = true;
                    view.notifyChange(true);
                });
            });
        </script>

    </body>
</html>
